<template>
    <el-table :data="tableData" height="calc(100vh - 400px)" border style="width: 100%"
              empty-text="暂无数据" :loading="loading">
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="taskName" label="节点名称"></el-table-column>
        <el-table-column align="center" prop="assignee" label="审批人" min-width="100"></el-table-column>
        <el-table-column align="center" prop="comment" label="审批意见" min-width="100"></el-table-column>
        <el-table-column align="center" prop="endTime" label="审批日期" width="200"
                         :formatter="formatterDate"></el-table-column>
        <el-table-column align="center" prop="duration" label="用时(小时/H)" min-width="100">
            <template slot-scope="scope">
                <span v-if="scope.row.duration">{{Math.round((scope.row.duration/1000/60/60)*100)/100}}</span>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: "WorkflowHistory",
        components: {},
        component: {},
        props: {
            instanceId: {
                type: String,
                required: true
            }
        },
        watch: {
            instanceId: {
                immediate: true,
                handler() {
                    this.initTableData(this.instanceId);
                }
            }
        },
        data() {
            return {
                tableData: [],
                loading: false
            }
        },
        methods: {
            formatterDate(row, column, cellValue, index) {
                return cellValue ? this.$formatDate(new Date(cellValue), 'yyyy-MM-dd hh:mm:ss') : "";
            },
            initTableData(instanceId) {
                console.log("initTableData", instanceId)
                this.loading = true;
                this.$httpGet(this.$axiosFlowHttp, `api/rest/instance/history/${instanceId}`, {})
                    .then(res => {
                        if (res.code === 200) {
                            this.tableData = res.data;
                        }
                        this.loading = false;
                    });
            },
            handleClose() {
                this.$emit("callBackFromSub", false);
            }
        },
        mounted() {
            console.log("mounted")
        },
        destroyed() {
            console.log("destroyed")
        }
    }
</script>

<style scoped lang="scss">
</style>
